<template>
  <transition-group name="toast" tag="div" class="toast-container">
    <div
      v-for="toast in toasts"
      :key="toast.id"
      :class="['toast-item', `toast-${toast.type}`]"
    >
      <div class="toast-icon">
        <el-icon v-if="toast.type === 'success'"><Check /></el-icon>
        <el-icon v-else-if="toast.type === 'error'"><Close /></el-icon>
        <el-icon v-else-if="toast.type === 'warning'"><Warning /></el-icon>
        <el-icon v-else><InfoFilled /></el-icon>
      </div>
      <div class="toast-content">
        <div class="toast-title">{{ toast.title }}</div>
        <div v-if="toast.message" class="toast-message">{{ toast.message }}</div>
      </div>
      <button class="toast-close" @click="removeToast(toast.id)">
        <el-icon><Close /></el-icon>
      </button>
    </div>
  </transition-group>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { Check, Close, Warning, InfoFilled } from '@element-plus/icons-vue'

export default {
  name: 'MessageToast',
  components: {
    Check,
    Close,
    Warning,
    InfoFilled
  },
  setup() {
    const toasts = ref([])
    let toastId = 0

    const addToast = (toast) => {
      const id = ++toastId
      const newToast = {
        id,
        type: toast.type || 'info',
        title: toast.title || '提示',
        message: toast.message,
        duration: toast.duration || 3000
      }

      toasts.value.push(newToast)

      if (newToast.duration > 0) {
        setTimeout(() => {
          removeToast(id)
        }, newToast.duration)
      }

      return id
    }

    const removeToast = (id) => {
      const index = toasts.value.findIndex(toast => toast.id === id)
      if (index > -1) {
        toasts.value.splice(index, 1)
      }
    }

    const clearAll = () => {
      toasts.value = []
    }

    // 全局方法
    const showSuccess = (title, message, duration) => {
      return addToast({ type: 'success', title, message, duration })
    }

    const showError = (title, message, duration) => {
      return addToast({ type: 'error', title, message, duration })
    }

    const showWarning = (title, message, duration) => {
      return addToast({ type: 'warning', title, message, duration })
    }

    const showInfo = (title, message, duration) => {
      return addToast({ type: 'info', title, message, duration })
    }

    // 暴露给全局使用
    onMounted(() => {
      window.$toast = {
        success: showSuccess,
        error: showError,
        warning: showWarning,
        info: showInfo,
        clear: clearAll
      }
    })

    onUnmounted(() => {
      delete window.$toast
    })

    return {
      toasts,
      removeToast
    }
  }
}
</script>

<style lang="scss" scoped>
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 400px;
  padding: 16px;
  margin-bottom: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid;
  pointer-events: auto;
  transition: all 0.3s ease;

  &.toast-success {
    border-left-color: #67c23a;
    
    .toast-icon {
      color: #67c23a;
    }
  }

  &.toast-error {
    border-left-color: #f56c6c;
    
    .toast-icon {
      color: #f56c6c;
    }
  }

  &.toast-warning {
    border-left-color: #e6a23c;
    
    .toast-icon {
      color: #e6a23c;
    }
  }

  &.toast-info {
    border-left-color: #409eff;
    
    .toast-icon {
      color: #409eff;
    }
  }

  .toast-icon {
    font-size: 20px;
    margin-top: 2px;
  }

  .toast-content {
    flex: 1;

    .toast-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 4px;
    }

    .toast-message {
      font-size: 13px;
      color: #606266;
      line-height: 1.4;
    }
  }

  .toast-close {
    background: none;
    border: none;
    color: #c0c4cc;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    transition: color 0.2s;

    &:hover {
      color: #909399;
    }
  }
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.toast-move {
  transition: transform 0.3s ease;
}

// 响应式设计
@media (max-width: 768px) {
  .toast-container {
    top: 70px;
    right: 10px;
    left: 10px;
  }

  .toast-item {
    min-width: auto;
    max-width: none;
    margin-bottom: 8px;
  }
}
</style>
